{% include 'header.html' %}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">简单用法</div>
          <div class="layui-card-body">

                <button class="layui-btn layui-btn-sm layui-btn-radius" lay-demo="add_project" style="margin-left:10px"><i class="layui-icon">&#xe654;</i>添加分组</button>
                <!--添加顶级节点-->

                <div id="add_project" style="display: none;margin-top: 20px;margin-left: 20px">
                    <ul id="add_project_form" class="layui-form layui-form-pane" style="margin-right: 15px">
                        <li class="layui-form-item">
                            <label class="layui-form-label">分组名称</label>
                            <div class="layui-input-block">
                                <input name="project_name" placeholder="请输入项目名称" autocomplete="off" class="layui-input" lay-verify="required">
                            </div>
                        </li>
                        <li class="layui-form-item" style="text-align: center">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit lay-filter="add_project">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </li>
                    </ul>
                </div>
            <p>&nbsp;</p>
            <div id="test-tree-demo1"></div>
          </div>
        </div>
      </div>
    </div>
</div>
  <script>
  function get_class() {  //获取节点数据
    var treeData = [];
    layui.$.ajax({
      url:'/servers/get_class',  //接口
      type:'get',     //请求方式
      async:false,  //同步请求
      success: function(result){
        treeData = result.data;
      }
    });
    console.log('节点数据：',treeData);
    return treeData;
  }
  layui.use(["element", "layer", "util","tree","jquery","form"], function () {
    var tree = layui.tree
    ,layer = layui.layer
    ,util = layui.util
    ,form = layui.form

    //模拟数据
    ,data = get_class()

    //基本演示
    tree.render({
      elem: '#test-tree-demo1'
      ,data: data
      ,edit: ['add', 'update', 'del']
      ,showCheckbox: true  //是否显示复选框
      ,id: 'test-tree-demoId1'
      ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
      ,isJump: true //是否允许点击节点时弹出新窗口跳转
      ,click: function(obj){
        var data = obj.data;  //获取当前点击的节点数据
        layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
      }
      ,operate: function(obj){
        var type = obj.type;
        var data = obj.data; //得到当前节点的数据
        var elem = obj.elem; //得到当前节点元素
        console.log('elem:',elem,'data:',data)

        if(type === 'add'){  //添加子节点
            $.post('/servers/add_class',{parent_id: data.id, title: "未命名"},function (result) {
                if (result.code===0){
                    layer.msg(result.msg,{icon: 6});
                    tree.reload('test-tree-demoId1', {data: get_class()});
                }else if(result.code===1){
                    layer.alert(result.msg,{icon: 5});
                    tree.reload('test-tree-demoId1', {data: get_class()});
                }else {
                    layer.alert(result.msg,{icon: 5})
                }
            })
        }else if(type === 'update'){  //修改节点
            $.post('/servers/edit_class',{class_id: data.id, title: data.title},function (result) {
                if (result.code===0){
                    layer.msg(result.msg,{icon: 6});
                    tree.reload('test-tree-demoId1', {data: get_class()});
                }else {
                    layer.alert(result.msg,{icon: 5})
                }
            })
        }else if(type === 'del'){  //删除节点
            if(data.children.length!==0){  //该节点有子节点时不允许删除
                layer.alert('请先删除该节点的子节点！！', {icon: 5});
                tree.reload('test-tree-demoId1', {data: get_class()});
            }else {
                $.post('/servers/del_class',{class_id: data.id},function (result) {
                    if (result.code===0){
                        layer.msg(result.msg,{icon: 6});
                        tree.reload('test-tree-demoId1', {data: get_class()});
                    }else if(result.code===1) {
                        layer.alert(result.msg,{icon: 5});
                        tree.reload('test-tree-demoId1', {data: get_class()});
                    }else {
                        layer.alert(result.msg,{icon: 5})
                    }
                })
            }
        }
      }
    });
    util.event('lay-demo', {  //添加顶级节点
        add_project:function () {
            layer.open({
                type: 1
                , title: '添加项目'
                , area: '400px'
                , shade: 0.4
                , content: $('#add_project')
                , success: function (layero, index) {
                    layero.find('.layui-layer-content').css('overflow', 'visible');
                    form.render().on('submit(add_project)', function(data) {
                        var form_data = {form_data: JSON.stringify(data.field)};
                        console.log('添加项目form_data:', form_data);
                        $.ajax({
                            data: form_data,
                            type: "post",
                            dataType: "JSON",
                            url: '/servers/add_project',
                            success:function (result) {
                                if (result.code===0){
                                    layer.close(index);
                                    layer.msg(result.msg,{icon: 6});
                                    tree.reload('test-tree-demoId1', {data: get_class()});  //添加成功时，需要重载tree
                                } else {
                                    layer.alert(result.msg,{icon: 5});
                                }
                            }
                        })
                    })
                }
            })
        }
    })
  });
  </script>
{% include 'footer.html' %}